<template>
    <div>
        <van-nav-bar
            title="问题详情"
            left-arrow
            />
            <!-- 保姆问题有哪些类型 -->
            <div class="detailed">
                <h4>保姆有哪些类型？</h4>
                <span>答：我们的保姆共分为四大类，分别是：住家保姆，进行全天24小时全职服务；不住家保姆，
                    提供白天半全职家庭服务；钟点工保姆，可以根据需求提供时长2-6小时之间的服务；育儿师，可全职
                    或半全职提供6个月以上的照顾和早教服务。您可以根据使用的实际需求下单，随后我们的专属顾问也会根据经验给您
                    推荐类型最合适的保姆。
                </span>
            </div>
            <!-- 按钮 -->
           <div class="detailed_1 ">
            <button @click="clickyy" :class="yy? 'botton':'actives'" ><img  src="../../assets/dz.png" >有用</button>
            <button @click="clickwy" :class="wy? 'botton':'actives'"><img src="../../assets/cai.png" >无用</button>
            
           </div>
           
          
    </div>
</template>

<script>
    export default {
        data() {
            return {
                yy:true,
                wy:true,
            }
        },
        methods: {
           clickyy(){
            this.yy = !this.yy
            if(this.yy == false){
                this.wy = true
            }
           },
           clickwy(){
            this.wy=!this.wy
            if(this.wy == false){
                this.yy = true

            }
           }
        },
    }
</script>

<style lang="scss" scoped>
.actives{
    background-color: #f03d37;
    color: white;
     border: 1px solid #aaa;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 15px;
    display: flex;
    align-items: center;

}

.detailed{
 background-color: white;
 padding: 8px;
 margin: 12px;
 border-radius: 10px;
}
.detailed>h4{
    margin: 10px 0;
}
.detailed>span{
    color: #aaa;
    font-size: 15px;
}
.detailed_1{
    display: flex;
    justify-content: space-evenly;
    margin-top: 30px;

}
button{
    background-color: white;
    border: 1px solid #aaa;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 15px;
    display: flex;
    align-items: center;
}
img{
    width: 20px;
    margin-right: 15px;
}
</style>